<template>
    <div class="weightPickerContainer">
        <span class="title">强度</span>

        <span v-if="value.material">

            <span v-if="mapTypeStr && mapTypeStr=== 'envMap' && typeof value.material.envMapIntensity === 'number'">
                 <input type="number" class="weightInput" v-bind:value="value.material.envMapIntensity"
                        v-on:input="onInput($event.target.value)" step="0.01">
                <span><el-slider v-model="value.material.envMapIntensity" :step="0.01" :max="100.00"></el-slider></span>
            </span>

            <span v-else-if="mapTypeStr && mapTypeStr=== 'aoMap' && typeof value.material.aoMapIntensity === 'number'">
                 <input type="number" class="weightInput" v-bind:value="value.material.aoMapIntensity"
                        v-on:input="onInput($event.target.value)" step="0.01">
                <span><el-slider v-model="value.material.aoMapIntensity" :step="0.01" :max="100.00"></el-slider></span>
            </span>

            <span v-else-if="mapTypeStr && mapTypeStr=== 'metalnessMap'">
                 <input type="number" class="weightInput" v-bind:value="parseFloat(value.material.metalness) || 0"
                        v-on:input="onInput($event.target.value)" step="0.01">
                <span><el-slider v-model="value.material.metalness" :step="0.01" :max="100.00"></el-slider></span>
            </span>

            <span v-else-if="mapTypeStr && mapTypeStr=== 'emissiveMap'">
                 <input type="number" class="weightInput" v-bind:value="value.material.emissiveIntensity || 0"
                        v-on:input="onInput($event.target.value)" step="0.01">
                <span><el-slider v-model="value.material.emissiveIntensity" :step="0.01" :max="100.00"></el-slider></span>
            </span>

            <span v-else-if="mapTypeStr && mapTypeStr=== 'alphaMap' && typeof value.material.opacity === 'number'">
                 <input type="number" class="weightInput" v-bind:value="value.material.opacity"
                        v-on:input="onInput($event.target.value)" step="0.01">
                <span><el-slider v-model="value.material.opacity" :step="0.01" :max="100.00"></el-slider></span>
            </span>

            <span v-else-if="mapTypeStr && mapTypeStr=== 'normalMap' && value.material.normalScale">
                 <input type="number" class="weightInput" v-bind:value="value.material.normalScale.x"
                        v-on:input="onInput($event.target.value)" step="0.01">
                <span><el-slider v-model="value.material.normalScale.x" :step="0.01" :max="100.00" ::change="changeSliderVal"></el-slider></span>
            </span>

            <span v-else-if="mapTypeStr && mapTypeStr=== 'roughnessMap'">
                 <input type="number" class="weightInput" v-bind:value="value.material.roughness || 0"
                        v-on:input="onInput($event.target.value)" step="0.01">
                <span><el-slider v-model="value.material.roughness" :step="0.01" :max="100.00"></el-slider></span>
            </span>

            <span v-else-if="mapTypeStr && mapTypeStr=== 'envMap'">
                 <input type="number" class="weightInput" v-bind:value="value.material.envMapIntensity || 0"
                        v-on:input="onInput($event.target.value)" step="0.01">
                <span><el-slider v-model="value.material.envMapIntensity" :step="0.01" :max="100.00"></el-slider></span>
            </span>

        </span>

        <span v-else>
            <input type="number" class="weightInput" v-bind:value="value.intensity"
                   v-on:input="onInput($event.target.value)" step="0.01">
            <span><el-slider v-model="value.intensity" :step="0.01" :max="5.00"></el-slider></span>
        </span>
    </div>
</template>

<script>
    import $ from "jquery";

    export default {
        name: "weightPickerCmp",

        props: ["data", "mapType", "weightContent"],

        data () {
            return {
                value: this.$props.data,
                mapTypeStr: this.$props.mapType,
                weightContentStr: this.$props.weightContent,
            }
        },

       watch: {
            weightContent: {
                handler () {

                    this.value =  this.$props.data;
                    this.mapTypeStr = this.$props.mapType;

                    this.stringToNumber();
                }
            }
        },

        created () {
            this.stringToNumber();
        },

        mounted() {

            const _this = this;

            $(() => _this.resetSlider());
        },

        methods: {

            resetSlider () {

                $(".el-slider").css({
                    display: "inline-block",
                    marginLeft: "24px",
                });

                $(".el-slider__runway").css({
                    width: "152px",
                    display: "inline-block",
                    height: "2px",
                    backgroundColor: "rgba(31, 33, 49, 1)"
                });

                $(".el-slider__button-wrapper").css({
                    top: "-17px"
                });

                $(".el-slider__button-wrapper div").css({
                    width: "12px",
                    height: "12px",
                    backgroundColor: "rgba(31, 33, 49, 1)",
                    border: "1px solid rgba(105, 108, 145, 1)",
                });

                $(".el-slider__bar").css({
                    backgroundColor: "rgba(113, 215, 203, 1)",
                    height: "2px",

                });
            },

            onInput (val) {

                if (val) {

                    if (this.value.type === "Mesh") {

                        if (this.mapTypeStr && this.mapTypeStr === "aoMap") {
                            this.value.material.aoMapIntensity = parseFloat(parseFloat(val).toFixed(2));
                            this.$props.data.material.aoMapIntensity = this.value.material.aoMapIntensity;
                        }

                        else if (this.mapTypeStr && this.mapTypeStr === "metalnessMap") {
                            this.value.material.metalness = parseFloat(parseFloat(val).toFixed(2));
                            this.$props.data.material.metalness = this.value.material.metalness;
                        }

                        else if (this.mapTypeStr && this.mapTypeStr === "envMap") {
                            this.value.material.envMapIntensity = parseFloat(parseFloat(val).toFixed(2));
                            this.$props.data.material.envMapIntensity = this.value.material.envMapIntensity;
                        }

                        else if (this.mapTypeStr && this.mapTypeStr === "emissiveMap") {
                            this.value.material.emissiveIntensity = parseFloat(parseFloat(val).toFixed(2));
                            this.$props.data.material.emissiveIntensity = this.value.material.emissiveIntensity;
                        }

                        else if (this.mapTypeStr && this.mapTypeStr === "alphaMap") {
                            this.value.material.opacity = parseFloat(parseFloat(val).toFixed(2));
                            this.$props.data.material.opacity = this.value.material.opacity;
                        }

                        else if (this.mapTypeStr && this.mapTypeStr === "normalMap") {
                            this.value.material.normalScale.x = parseFloat(parseFloat(val).toFixed(2));
                            this.$props.data.material.normalScale.x = this.value.material.normalScale.x;
                            this.$props.data.material.normalScale.y = this.value.material.normalScale.x;
                        }

                        else if (this.mapTypeStr && this.mapTypeStr === "roughnessMap") {
                            this.value.material.roughness = parseFloat(parseFloat(val).toFixed(2));
                            this.$props.data.material.roughness = this.value.material.roughness;
                        }

                        else {
                            this.value.material.envMapIntensity = parseFloat(parseFloat(val).toFixed(2));
                            this.$props.data.material.envMapIntensity = this.value.material.envMapIntensity;
                        }

                    } else {

                        this.value.intensity = parseFloat(parseFloat(val).toFixed(2));
                        this.$props.data.intensity = this.value.intensity;
                    }
                }
            },

            changeSliderVal () {

                this.$props.data.material.normalScale  = this.$props.data.material.normalScale || {x:0,y:0};
                this.$props.data.material.normalScale.x = this.$props.data.material.normalScale.x;
                this.$props.data.material.normalScale.y = this.$props.data.material.normalScale.x;

                if (!this.$props.data.material.needsUpdate) this.$props.data.material.needsUpdate = true;

            },

            stringToNumber () {

                if (!this.value.material) return;

                if (this.value.material.aoMapIntensity && typeof this.value.material.aoMapIntensity !== 'number') {
                    this.value.material.aoMapIntensity = parseFloat(this.value.material.aoMapIntensity);
                }

                if (this.value.material.emissiveIntensity && typeof this.value.material.emissiveIntensity !== 'number') {
                    this.value.material.emissiveIntensity = parseFloat(this.value.material.emissiveIntensity);
                }

                if (this.value.material.metalness && typeof this.value.material.metalness !== 'number') {
                    this.value.material.metalness = parseFloat(this.value.material.metalness);
                }

                if (this.value.material.emissiveIntensity && typeof this.value.material.emissiveIntensity !== 'number') {
                    this.value.material.emissiveIntensity = parseFloat(this.value.material.emissiveIntensity);
                }

                if (this.value.material.envMapIntensity && typeof this.value.material.envMapIntensity !== 'number') {
                    this.value.material.envMapIntensity = parseFloat(this.value.material.envMapIntensity);
                }
            }
        },
    }
</script>

<style scoped>
    .weightPickerContainer {
        padding-bottom: 14px;
    }

    .weightInput {
        border: none;
        width: 50px;
        height: 30px;
        background: rgba(31,33,49,1);
        border-radius: 5px;
        color: rgba(182,184,220,1);
        font-size: 13px;
        margin-left: 9px;
        text-align: center;
    }

    .title {
        padding-left: 32px;
        font-size: 12px;
        font-weight: 100;
    }
</style>